<h2 class="mt-30">
  {{t "loggingPage.kafka.header"}}
</h2>
<hr/>

<div class="box mb-10">
  <div>
    <span class="pr-10">
      {{t "loggingPage.kafka.endpointType"}}:
    </span>
    {{#unless isWindows}}
      <label class="mr-10">
        {{radio-button
          selection=brokerType
          value="zookeeper"
        }}
        {{t "loggingPage.kafka.zookeeper"}}
      </label>
    {{/unless}}
    <label class="mr-10">
      {{radio-button
        selection=brokerType
        value="broker"
      }}
      {{t "loggingPage.kafka.broker"}}
    </label>
    <p class="text-info text-small">
      {{#if isWindows}}
        {{t "windowsCluster.logging.kafka.brokerTypeHelpText"}}
      {{else}}
        {{t "loggingPage.kafka.brokerTypeHelpText"}}
      {{/if}}
    </p>
  </div>
  <hr/>
  <section class="mb-30">
    {{#if (eq brokerType "zookeeper")}}
      <div>
        <label class="acc-label" for="">
          {{t "loggingPage.endpoint"}}
          {{field-required}}
        </label>
        {{input
          type="text"
          value=config.zookeeperEndpoint
          classNames="form-control"
          placeholder=(t "loggingPage.kafka.endpoint.zookeeper.placeholder")
          id="kafka-endpoint"
        }}
      </div>
      <p class="text-info text-small mb-0">
        {{t "loggingPage.kafka.zookeeperHelpText"}}
      </p>
    {{else}}
      {{#each brokerEndpoints as |item idx|}}
        <div class="row">
          <div class="col span-11">
            <label class="acc-label" for="">
              {{t "loggingPage.endpoint"}}
              {{#if (eq idx 0)}}
                {{field-required}}
              {{/if}}
            </label>
            {{input
              type="text"
              value=item.endpoint
              classNames="form-control"
              placeholder=(t "loggingPage.kafka.endpoint.broker.placeholder")
            }}
          </div>
          <div class="col span-1" style="padding-top: 29px">
            <button class="btn bg-primary icon-btn {{if canRemove "" "disabled"}}" type="button" {{action "remove" item}}>
              <span class="darken">
                <i class="icon icon-minus"></i>
              </span>
            </button>
          </div>
        </div>
      {{/each}}
      <p class="text-info text-small mb-0">
        {{t "loggingPage.kafka.brokerHelpText"}}
      </p>
      <div class="mt-20">
        <button class="btn bg-link icon-btn p-0" type="button" {{action "add"}}>
          <span class="darken">
            <i class="icon icon-plus text-small"/>
          </span>
          <span>
            {{t "loggingPage.kafka.addEndpoint"}}
          </span>
        </button>
      </div>
    {{/if}}
  </section>
  <hr/>
  <div class="row">
    <div class="col span-6 mt-0 pt-0">
      <label class="acc-label" for="">
        {{t "loggingPage.kafka.topic.label"}}
        {{field-required}}
      </label>
      {{input
        type="text"
        value=config.topic
        classNames="form-control"
        placeholder=(t "loggingPage.kafka.topicPlaceholder")
      }}
      <p class="text-info text-small">
        {{t "loggingPage.kafka.topicHelpText"}}
      </p>
    </div>
  </div>
</div>

{{#if (eq brokerType "broker")}}
  {{logging/form-log-ssl
    config=config
    targetType=targetType
  }}

  {{logging/form-log-sasl
    config=config
  }}
{{/if}}

{{logging/form-log-format
  logPreview=logPreview
  model=model
  loggingModel=parentModel
}}
{{!--
{{#advanced-section advanced=showAdvanced}}
{{logging/form-log-docker model=model parentModel=parentModel}}
{{/advanced-section}} --}}
